<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未来可期任务平台-任务列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.2/css/swiper.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
    <link href="https://img.qianxiaoduan.com/element-ui/2.3.4/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://page.qianxiaoduan.com/css/style-red.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2808129_awgy92qb9k7.css">
    <script src="js/toLogin.js"></script>
    <style>
        .search-box{
            position: relative;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            background: #2f3640;
            height: 40px;
            border-radius: 40px;
            padding: 10px;
        }
        .search-box:hover>.search-txt{
            width: 200px;
            padding: 0 6px;
        }
        .search-box:hover>.search-btn{
            background: white;
        }
        .search-btn{
            position: relative;
            top: -7px;
            color: #e84118;
            float:right ;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #2f3640;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .search-txt {
            margin-top: -10px;
            border: none;
            background: none;
            outline: none;
            float: left;
            padding: 0;
            color: white;
            font-size: 16px;
            transition: 0.4s;
            line-height: 40px;
            width: 0px;
        }
    </style>
</head>
<body>
<div class="Theme-header-Style1 header-container ">
    <div class="container">
        <div class="row">
            <div class="col">
                <div style="margin-top:-25px" class="logo">
                    <a href="">
                        <img src="img/logo.png" alt="">
                    </a>
                </div>
                <div style="position: absolute;top:18px;">
                    <img src="img/log1.png">
                </div>
            </div>
            <div id="login_div">
                <span onclick="toLogin()">
                    <i style="font-size: 25px" class="iconfont icon-denglu1"></i>
                </span>
                <span onclick="toRegister()" style="margin-left: 15px">
                    <i style="font-size: 25px" class="iconfont icon-zhuce"></i>
                </span>
            </div>
            <div id="exit_div" style="display: none">
                <a onclick="toEsc()" href="#" style="margin-top:20px;font-size: 20px;color: red">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a id="myCenter" href="myCenter.html" style="color: coral;font-size: 15px">个人中心</a>
            </div>
        </div>
    </div>
</div>
<div class="Theme-breadcrumb-trail">
    <div style="background-color:#eee;" class="Theme-pageTarget">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div>
                        您的位置：
                        <a href="index.html">
                            首页
                        </a>
                        > 任务列表
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="Theme-pageTargetUl" style="height: 20px">
        <div class="container">
            <div class="row">
                <div class="col">
                    <ul>
                        <li class="active">
                            <a href="">
                                    <span>
                                        全部
                                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="classify.html">
                                    <span>
                                        分类
                                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="query">
                                    <span>
                                        查询
                                    </span>
                            </a>
                        </li>
                        <div style="display: none;margin-left: -550px" id="search" class="search-box">
                            <input class="search-txt" type="text" name="" placeholder="Type to search" id="query_txt">
                            <a class="search-btn" href="#" id="search_btn">
                                <i class="iconfont icon-chaxun"></i>
                            </a>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!--列表开始-->
<div id="task_list" class="Theme-rolling-background1 Theme-mb-list">
</div>
<!--列表结束-->
<div class="Theme-paging">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul id="classify">

                </ul>
            </div>
        </div>
    </div>
</div>
<div class="Theme-footer-1">
    <div class="container">
        <div class="row">
            <div class="col">
                <h3>
                    未来可期有限公司
                </h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <p>
                    未来可期有限公司 COPYRIGHT (©) 2022
                    <br>
                    公司地址：四川省成都市武侯区
                    <br>
                    联系电话：0021-93123
                    <br>
                    邮箱：kaix.wang@dhcca.com
                </p>
            </div>
            <div class="col">
                <ul>
                    <li>
                        <a href="">
                            网站首页
                        </a>
                    </li>
                    <li>
                        <a href="">
                            招商代理加盟
                        </a>
                    </li>
                    <li>
                        <a href="">
                            产品中心
                        </a>
                    </li>
                    <li>
                        <a href="">
                            新闻百科
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col">
                <ul>
                    <li>
                        招商代理
                    </li>
                    <li>
                        新闻资讯
                    </li>
                    <li>
                        关于我们
                    </li>
                    <li>
                        联系我们
                    </li>
                </ul>
            </div>
            <div class="col QR-code">
                <img src="https://img.qianxiaoduan.com/muban/QR-code.jpg" alt="">
                <p>
                    联系我们
                </p>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.2.2/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
<script src="https://page.qianxiaoduan.com/js/script.js"></script>
<script src="js/toLogin.js"></script>
</body>
<script src="js/jquery.min.js"></script>
<script>
    let page;
    let pages;
    $(function () {
        page=window.location.href.split("=")[1];
        if(typeof page=="undefined"){
            page=1;
        }
        $.ajax({
            url:"task/all",
            data:{
                "pageNum":page,
            },
            success:function (res) {
                console.log(res);
                let data=res.list;
                pages=res.pages;
                for (let i = 0; i <data.length; i++) {
                    let div1=$("<div class='container'></div>");
                    let div2=$("<div class='row'></div>");
                    let div3=$("<div class='col'></duv>");
                    let div4=$("<div class='img wow slideInLeft animated' style='visibility: visible; animation-name: slideInLeft;'></div>");
                    let h2=$("<h2></h2>").text(data[i].task_name);
                    let div5=$("<div class='con wow slideInRight animated' style='visibility: visible; animation-name: slideInRight;'></div>");
                    let h1=$("<h1></h1>").text(data[i].task_bounty+"元/"+data[i].payroll_method);
                    let span=$("<span></span>").text("|"+data[i].task_type);
                    let p=$("<p></p>").text(data[i].task_content);
                    let a1=$("<a id='access_"+data[i].id+"' onclick='access(this.id)'>Access</a>");
                    let a2=$("<a id='more_"+data[i].id+"' onclick='more(this.id)'>More</a>");
                    div1.append(div2);
                    div2.append(div3);
                    div3.append(div4,div5);
                    div4.append(h2);
                    div5.append(h1,p,a1,a2);
                    h1.append(span);
                    $("#task_list").append(div1);
                    if(i!=data.length-1){
                        let div6=$("<div style='height: 1px;border: 1px solid #999999'></div>");
                        $("#task_list").append(div6);
                    }
                }
                let li1=$("<li onclick='left()'></li>");
                let a1=$("<a onclick='left()'></a>");
                let i1=$("<i onclick='left()' style='font-size: 30px' class='iconfont icon-zuo'></i>");
                a1.append(i1);
                li1.append(a1);
                $("#classify").append(li1);
                for (let i = 1; i <=res.pages; i++) {
                    let li=$("<li id='topage2_"+i+"' onclick='toPage(this.id)'></li>");
                    let a=$("<a style='font-size: 25px' id='topage_"+i+"' onclick='toPage(this.id)'></a>").text(i);
                    li.append(a);
                    $("#classify").append(li);
                }
                $("#topage_"+page).css("color","red");
                let li2=$("<li onclick='right()'></li>");
                let a2=$("<a onclick='right()'></a>");
                let i2=$("<i onclick='right()' style='font-size: 30px' class='iconfont icon-gengduo'></i>");
                a2.append(i2);
                li2.append(a2);
                $("#classify").append(li2);
            },

        });
    });

    function toPage(res) {
        let pageNum=res.split("_")[1];
        return window.location.href="task_list.html?page="+pageNum;
    }

    function left() {
        if(page-1<1){
            alert("这就是第一页，前面没有啦!");
            return;
        }
        return window.location.href="task_list.html?page="+(page-1);
    }

    function right() {
        if((parseInt(page)+1)>pages){
            alert("这已经是最后一页了，后面没有啦！");
            return;
        }
        return window.location.href="task_list.html?page="+(parseInt(page)+1);
    }

    $("#myCenter").click(function () {
        $.ajax({
            url:"myTask/all",
            success:function (res) {
                if(res.code==500){
                    alert("你还未登录，请先登录");
                    let href=window.location.href;
                    sessionStorage.setItem("href",href);
                    return window.location.href="login.html";
                }
                return window.location.href="myTask.html";
            }
        })
    });

    $("#classify").click(function(){
        $.ajax({
            url:"task/classify",
            success:function (res) {
                $("#noneDiv").css("display","block");
                for (let i = 0; i <res.data.length ; i++) {
                    let li=$("<li></li>");
                    let a=$("<a></a>").text(res.data[i].name+"("+res.data[i].count+")");
                    li.append(a);
                    $("#ul_classify").append(li);
                    $("#noneDiv").append($("#ul_classify"));
                }
            }
        });
    });

    function access(res) {
        let taskid=res.split("_")[1];
        $.ajax({
            url:"myTask/access",
            datatype:"json",
            data:{"taskid":taskid},
            success:function (res) {
                if(res.code==500){
                    alert("你还未登录，无法接取任务！");
                    let href=window.location.href;
                    sessionStorage.setItem("href",href);
                    return window.location.href="login.html";
                }
                alert("你接取了一项任务");
                return window.location.href="task_list.html";
            }
        })
    }

    function more(res) {
        let id=res.split("_")[1];
        return window.location.href="xqy.html?id="+id;
    }

    $("#query").click(function () {
        $("#search").css("display","block");
    })

    $("#search_btn").click(function () {
        let mes=$("#query_txt").val();
        return window.location.href="query.html?="+mes;
    })

</script>
</html>